<template>
  <div class="goods">
    <ul>
      <li style="width: 20%; float: left">
        <div class="goods-list">
          <a href="#" @click.prevent="toproduct">
            <img class="picture" :src="goods.attributeValue0" />
          </a>
          <div class="list-body">
            <strong>
              ￥{{ goods.price }}
              <del>￥{{ goods.marketPrice }}</del>
            </strong>
            <a href="#" @click.prevent="toproduct">
              <h5 class="text-overflow">{{ goods.name }}</h5>
              <h6 class="text-overflow text-orange">
                {{ goods.caption }} &nbsp;
              </h6>
            </a>
            <p class="text-center" >
              <a href="#" :title="shopName">{{ shopName }}</a>
              <span class="text-icon">自营</span>
            </p>
          </div>
          <div class="list-footer">
            <a href="#" class="add-product" @click.prevent="addcart">
              <i class="iconfont el-icon-shopping-cart-2"></i>
              加入购物车
            </a>
            <a class="add-product" href="#" title="收藏" @click.prevent="addcollect">
              <i class="iconfont el-icon-star-off"></i>
            </a>
            <!-- <a class="add-product" href="#" title="详情">
              <i class="iconfont el-icon-chat-dot-square"></i>
            </a> -->
          </div>
        </div>
      </li>
    </ul>
  </div>
</template>

<script>
import { getInfo,cartadd,collect } from "@/api/shop";
import { ref } from "@vue/reactivity";
import router from '@/router'
import { ElMessage } from 'element-plus'
export default {
  name: "Goods",
  props: ["goods"], 
  setup(props) {
    let shopName = ref();
    let id = ref(props.goods.id)
    // console.log(id);
    // console.log(props.goods);
    getInfo(props.goods.storeId).then((res) => {
      shopName.value = res.data.data.name;
    }); 
    // 跳转页面
    function toproduct(){
      sessionStorage.setItem('id',id.value)
      router.push({path:'/product'})
    }
    // 添加购物车
    function addcart(){
      console.log(id);
      cartadd(id.value).then(() =>{
        ElMessage.success('添加购物车成功')
      })  
    }
    function addcollect(){
      console.log(id);
      let a =localStorage.getItem('id')
      collect(id.value,a).then(() =>{
        ElMessage.success('添加我的收藏成功')
      })
    }
    return {
      addcollect,
      shopName,
      toproduct,
      addcart
    };
  },
};
</script>

<style scoped>
* {
  color: #666;
  font-size: 13px;
}
a {
  text-decoration: none;
}
ul,
li {
  list-style: none;
  padding: 0;
  margin: 0;
}
.text-orange {
  color: #f78e3d;
}
.goods {
  width: 100%;
  margin: 10px auto;
}
.goods-list {
  line-height: 25px;
  padding: 10px 10px 0 10px;
  margin-top: 15px;
  margin-right: 15px;
  position: relative;
  overflow: hidden;
  transition: border-color 0.3s;
  border: 1px solid #eeeeee;
}
.goods-list:hover {
  border-color: #409eff;
  box-shadow: 0 2px 12px 0 rgba(64, 159, 255, 0.3);
}
.goods-list:hover .list-footer a,
.goods-list:hover .list-footer a i {
  color: #409eff;
}
.list-body {
  width: 187px;
  padding: 10px 0;
  margin: auto;
  border-bottom: 1px #f8f8f8 solid;
}
.list-body a h5:hover {
  color: #409eff;
}
.picture {
  max-width: 100%;
  height: auto;
  display: block;
  margin-left: auto;
  margin-right: auto;
}
.list-body strong {
  color: #f04134;
}
.list-body strong del {
  color: #bfbfbf;
  font-weight: normal;
}
.text-overflow {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  line-height: 20px;
  font-weight: normal;
  margin: 0;
}
.text-center {
  text-align: center;
  margin: 0;
}
.text-center a:hover {
  color: #409eff;
}
.text-icon {
  margin-left: 10px;
  background-color: #409eff;
  display: inline;
  padding: 1px 6px 2px;
  font-size: 12px;
  font-weight: bold;
  color: #fff;
  border-radius: 3px;
}

.list-footer {
  padding: 10px 0;
  position: relative;
  left: 10px;
  right: 10px;
  margin: 0 auto;
}
.add-product {
  padding: 0 5px;
  transition: color 0.3s;
}
.add-product:not(:last-child) {
  border-right: 1px #eeeeee solid;
}
</style>